<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        <meta name="description" content="Plane UI" />
        <meta name="keywords" content="Plane UI" />
		<title>Blog example - Plane UI</title>

        <link rel="icon" type="image/png" href="../favicon.png" />
        <link rel="stylesheet" type="text/css" href="../../dist/css/planeui.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<body>
        <!--[if lte IE 9]>
        <div class="pui-layout pui-browsehappy">
            <a href="javascript:;" class="pui-close" onclick="document.body.removeChild(this.parentNode);"></a>
            <p>您正在使用 <strong class="pui-text-yellow pui-text-xl">过时</strong> 的非现代浏览器，<strong class="pui-text-success pui-text-xl">91.23%</strong> 的人选择 <a href="http://browsehappy.com/" target="_blank" class="pui-text-green-400 pui-text-xl"><strong>升级浏览器</strong></a>，获得了更好、更安全的浏览体验！</p>
        </div>
        <![endif]-->
        <a name="top"></a>
        <a href="#top" class="fa fa-arrow-circle-up fa-3x pui-text-blue-400" id="go-to-top"></a>
		<div class="pui-layout">
            <div class="pui-layout pui-bg-blue-500 blog-header-con">
                <header class="pui-center pui-layout-fixed pui-layout-fixed-1200 blog-header">
                    <h2>Plane UI's Blog<small class="pui-text-white">官方博客</small></h2>
                    <menu class="pui-grid pui-row blog-menu">
                        <ul class="pui-menu pui-menu-inline pui-menu-radius pui-grid-xs-12 pui-grid-sm-8 pui-grid-md-8 pui-grid-lg-9 pui-xs-hide">
                            <li>
                                <a href="index.html"><i class="fa fa-home"></i> 首页</a>
                            </li>
                            <li>
                                <a href="#">PHP</a>
                            </li>
                            <li>
                                <a href="#">前端 <i class="pui-arrow-down"></i></a> 
                                <ul class="pui-menu pui-menu-dropdown">
                                    <li>
                                        <a href="#">HTML5 & CSS3</a>
                                    </li>
                                    <li>
                                        <a href="#">Javascript</a>
                                    </li>
                                    <li>
                                        <a href="#">jQuery</a>
                                    </li>
                                    <li>
                                        <a href="#">Node.js</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">设计 <i class="pui-arrow-down"></i></a>
                                <ul class="pui-menu pui-menu-dropdown">
                                    <li>
                                        <a href="#">交互设计</a>
                                    </li>
                                    <li>
                                        <a href="#">网页设计</a>
                                    </li>
                                    <li>
                                        <a href="#">UI设计</a>
                                    </li>
                                    <li>
                                        <a href="#">平面设计</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">游记</a>
                            </li>
                            <li>
                                <a href="#">关于我</a>
                            </li>
                        </ul>
                        <div class="pui-grid-xs-12 pui-grid-sm-4 pui-grid-md-4 pui-grid-lg-3 blog-search pui-xs-hide">
                            <form action="" method="post" class="pui-search pui-round pui-search-large pui-search-unbordered pui-right">
                                <input type="text" name="keywords" class="pui-search-keywords" placeholder="搜索..." />
                                <button type="submit" class="pui-search-submit" name="submit-pui-search" value=""></button>
                                <ul class="pui-list pui-search-auto-complete pui-shadow pui-hide">
                                    <li><a href="#">Plane</a></li>
                                    <li><a href="#">Plane 插件</a></li>
                                    <li><a href="#">Plane UI</a></li>
                                    <li><a href="#">Plane 组件</a></li>
                                    <li><a href="#">Plane 教程</a></li>
                                </ul>
                            </form> 
                        </div>
                    </menu>
                    
                    <i class="fa fa-list fa-2x pui-xs-show" id="open-menu"></i>
                </header>
            </div> 
            <div class="pui-container pui-layout-fixed pui-layout-fixed-1200 pui-grid blog-main">
                <div class="pui-row">
                    <div class="pui-grid-xs-12 pui-grid-sm-8 pui-grid-md-8 pui-grid-lg-9 blog-list">           
                        <div class="pui-card pui-card-default pui-card-simple">
                            <div class="pui-card-title">
                                <strong><a href="view.html">转载：扁平和简约来袭</a></strong>
                                <p class="article-category">
                                    来源：<a href="http://cdc.tencent.com/?p=7951">腾讯CDC</a>&nbsp;&nbsp;&nbsp;分类：<a href="#">交互设计</a>, <a href="#">网页设计</a>
                                </p>
                                <span class="article-date"><small>2014</small>02-12</span>
                            </div>
                            <div class="pui-card-foot pui-clear">
                                <span class="pui-text-gary"><i class="fa fa-eye"></i> 浏览: 150,278&nbsp;&nbsp;&nbsp;<i class="fa fa-comments"></i> <a href="#comments" class="pui-text-gary">评论: 15</a>&nbsp;&nbsp;&nbsp;<i class="fa fa-heart-o"></i> 喜爱: 312</span>
                                <div class="bdsharebuttonbox pui-right">
                                    <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                                    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                                    <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
                                    <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
                                    <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                                    <a href="#" class="bds_more" data-cmd="more"></a>
                                </div>
                            </div>
                            <div class="pui-card-box">
                                <p><img src="http://cdc.tencent.com/?attachment_id=7965" class="pui-img-full-width article-image" /></p>
                                <div class="pui-text-sm">
                                    <blockquote>
                                        <p class="pui-text-indent">译者注：本文作者 Adrian Taylor 是一位交互创意总监并且是Pushstart Creative的创办人,专注于多种研究，如物理聚合、人机交互技术和品牌体验等。尽管他目前工作的重点是产品研发、战略发展、UX等，但是对pixels却一往情深。想了解更多可以去 designtaylor.com或者上Twitter查找 Adrian Taylor。</p>
                                        <p class="pui-text-indent">原文地址：<a href="http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/" target="_blank" class="pui-link">http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/</a></p>
                                    </blockquote>
                                    <br/>
                                    <p class="pui-text-indent">在过去几年里，软件和APP的界面设计风格发生了迅速变化，由3D、拟物发展到扁平、简约。尽管这一趋势普遍存在，我们还是思考下是如何发展至此的，以及它对整个界面设计领域有何影响。另外，我会分享扁平界面设计的一些技巧和注意问题。</p>
                                    <p class="pui-text-center"><img src="http://cdc.tencent.com/wp-content/uploads/2014/02/Flat-And-Thin-Are-In_mobile_os_mini.jpg" class="pui-img-responsive" /></p>
                                    <p class="pui-text-center"><small>Windows Phone 8 和 Apple’s iOS 7的用户界面</small></p>
                                    <h2>发生了什么？</h2>
                                    <p class="pui-text-indent">那么，为什么群体意识从喜爱带纹理、有透视和阴影的设计转变喜爱扁平色彩和极简图形的设计呢？当然导致这一转变有很多因素，但是有一些因素更为突出。  </p>
                                    <h4>信息过载</h4>
                                    <p class="pui-text-indent">随着世界联系越来越紧密，我们不断地接受大量信息，一些信息是重要的、相关的，但大部分不是。我们不断地评估其价值，过滤无用信息，或创建新的内容，所有这些都使我们精疲力竭。还有，大部分内容消费已转移到小屏幕设备，更是加剧了超负荷现象。这样我们就很容易就淹没在信息中，砍掉用户界面（UI）的繁杂元素才是视觉设计的王道。</p>
                                    <p class="pui-text-center"><img src="http://cdc.tencent.com/wp-content/uploads/2014/02/Flat-And-Thin-Are-In_geckoboard_mini.jpg" class="pui-img-responsive" /></p>
                                    <p class="pui-text-center"><small>摆脱混乱: Geckoboard的设计使关键数据被一目了然呈现，并易于理解</small></p>
                                    <h4>简约就是金科玉律</h4>
                                    <p class="pui-text-indent">同样有个趋势就是，颠覆性的网页应用和服务正提供高度专用化的工具，只设计少数功能。虽然传统软件开发员倾向于为产品加载过多功能，以期获得高价定位；但目前变化趋势专注于微应用，偏爱功能简洁。简单的应用意味着有简单的界面。</p>
                                    <p class="pui-text-center"><img src="http://cdc.tencent.com/wp-content/uploads/2014/02/Flat-And-Thin-Are-In_blue_mini.jpg" class="pui-img-responsive" /></p>
                                    <p class="pui-text-center"><small>美观且精致：  由Oak.设计的 Blue 天气应用程序</small></p>
                                    <h4>又一次，以内容核心</h4>
                                    <p class="pui-text-indent">新设备和新技术涌入市场时，常常会出现这样的情况，我们热衷于思考于它们能做什么，我们又怎样才能提高交互性。但关注界面设计这一狂热之后又回归专注于内容。媒体资源的消费，不论文字、音乐还是视频、音视频，等我们设备上最常用的活动，在你乐享其中时，肯定不希望被无关的界面元素打扰。</p>
                                    <h4>技术水平</h4>
                                    <p class="pui-text-indent">随着智能手机和平板电脑已渗透到千家万户，显性操作正在逐渐减少。过去，如果弹窗没有从屏幕跳出来，我们曾担心用户会错过操作，而现在，我们更愿意让用户去探索这种细微的交互体验。鉴于此，很多互联网产品已经支持没有任何视觉引导的触碰指令。</p>
                                    <p class="pui-text-center"><img src="http://cdc.tencent.com/wp-content/uploads/2014/02/Flat-And-Thin-Are-In_fitbit_dashboard_mini.jpg" class="pui-img-responsive" /></p>
                                    <p class="pui-text-center"><small>Fitbit的仪表盘的视觉设计清爽,、胆大,和亲和力</small></p>
                                    <h4>技术的影响</h4>
                                    <p class="pui-text-indent">大部分软件受限于运行平台。屏幕尺寸和像素密度也受限于硬件设备条件。一个简约的界面需要十分有限的设计元素，这意味着每一个元素都要有所发挥。排版布局和字体粗细在很大程度上决定了扁平设计的美观和易用性。</p>
                                    <p class="pui-text-indent">如果你的目标设备不能处理好这方面的细微差别，你就不太幸运了。随着屏幕尺寸和像素密度不断增加，更细、更小的样式也能呈现最佳的清晰度。当然，对@font-face属性的支持，提高了对文字间距的集中处理，也增加了极简排版的吸引力。</p>
                                    <p class="pui-text-center"><img src="http://cdc.tencent.com/wp-content/uploads/2014/02/Flat-And-Thin-Are-In_wallmob_mini.jpg" class="pui-img-responsive" /></p>
                                    <p class="pui-text-center"><small>Wallmob的市场数据监控应用：从任何一个有一个浏览器的设备上都可以检测到数据</small></p>
                                    <h4>响应式设计</h4>
                                    <p class="pui-text-indent">随着各种尺寸联网设备的普及，交互界面变得更需要强调适配性，响应式设计也就应运而生。虽然响应式设计并不要求特定风格，但扁平的交互界面显然比其它样式要更容易处理。简约设计的另一种优势就是，能见降低页面重量和缩短加载时间。</p>
                                    <p class="pui-text-center"><img src="http://cdc.tencent.com/wp-content/uploads/2014/02/Flat-And-Thin-Are-In_onsiteio_500_mini.jpg" class="pui-img-responsive" /></p>
                                    <p class="pui-text-center"><small>无重量的响应设计: <a href="http://onsite.io/" target="_blank" class="pui-underline pui-link">OnSite. </a><a href="http://media.smashingmagazine.com/wp-content/uploads/2013/09/onsiteio_mini.jpg" target="_blank" class="pui-underline pui-link">(大尺寸展示)</a>  </small></p>
                                    <blockquote>
                                        全文详见：<a href="http://cdc.tencent.com/?p=7951" target="_blank" class="pui-link">http://cdc.tencent.com/?p=7951</a>
                                    </blockquote>
                                    <a name="comments"></a> 
                                    <p class="pui-text-center"><a href="#top" class="pui-btn pui-btn-default">TOP <i class="fa fa-long-arrow-up" style="margin-top: -5px;"></i></a></p>
                                    <br/>
                                </div>
                            </div>
                        </div>
                        <div class="pui-menubar pui-menubar-square">
                            <div class="pui-menubar-aside">
                                <a href="#" title="QQ导航改版设计心得">上一篇：QQ导航改版设计心得</a>
                            </div>
                            <div class="pui-menubar-offside">
                                <a href="#">下一篇：做好扁平化设计－交互篇与众不同易，精益求精难</a>
                            </div>
                        </div>                         
                        <h4 class="h4">评论列表</h4>
                        <div class="pui-comment pui-comment-avatar-left pui-unbordered">
                            <div class="pui-comment-avatar">
                                <img src="images/2.png" class="pui-img-circle pui-img-xs" />
                                <p>网友</p>
                            </div>
                            <div class="pui-comment-container">
                                <div class="pui-comment-main pui-comment-arrow-lt">
                                    <header class="pui-comment-header">
                                        <div class="pui-comment-title-right">
                                            #1楼 <a href="javascript:;">赞(18)</a> <a href="javascript:;">反对(0)</a>
                                        </div>
                                        <div class="pui-comment-subtitle">评论于 2014-7-12 15:30</div>
                                    </header>
                                    <section class="pui-comment-content">
                                        评论内容XXXXXXXXXXXXXXXXXXXXXXXXXX<br/>评论内容XXXXXXXXXXXXXXXXXXXXXXXXXX<br/>
                                        评论内容XXXXXXXXXXXXXXXXXXXXXXXXXX<br/>评论内容XXXXXXXXXXXXXXXXXXXXXXXXXX
                                    </section>
                                    <div class="pui-comment-foot"><a href="javascript:;">回复</a><a href="">顶</a><a href="javascript:;">举报</a></div>
                                </div>   
                                <div class="pui-comment-reply">                   
                                    <div class="pui-comment pui-comment-avatar-left">
                                        <div class="pui-comment-arrow"><span></span></div>
                                        <div class="pui-comment-avatar">
                                            <img src="images/1.jpg" class="pui-img-circle pui-img-xs" />
                                            <p>网友</p>
                                        </div>
                                        <div class="pui-comment-container">
                                            <header class="pui-comment-header">
                                                <div class="pui-comment-title-right">
                                                    #1楼-1 <a href="javascript:;">赞(1)</a> <a href="javascript:;">反对(18)</a>
                                                </div> 
                                                <div class="pui-comment-subtitle"><a href="javascript:;" class="pui-link">@某某某</a> <span class="pui-comment-reply-time">回复于2014-7-12 15:30</span></div>
                                            </header>
                                            <section class="pui-comment-content">
                                                介就是回复的内容....
                                            </section>
                                            <footer class="pui-comment-foot pui-text-right">
                                                <a href="javascript:;">回复</a><a href="">顶</a><a href="javascript:;">举报</a>
                                            </footer>
                                        </div>
                                    </div>
                                    <div class="pui-comment pui-comment-avatar-left">   
                                        <div class="pui-comment-arrow"><span></span></div>                       
                                        <div class="pui-comment-avatar">
                                            <img src="images/3.jpg" class="pui-img-circle pui-img-xs" />
                                            <p>网友</p>
                                        </div>
                                        <div class="pui-comment-container">
                                            <header class="pui-comment-header">
                                                <div class="pui-comment-title-right">
                                                    #1楼-2 <a href="javascript:;">赞(1)</a> <a href="javascript:;">反对(18)</a>
                                                </div> 
                                                <div class="pui-comment-subtitle"><a href="javascript:;" class="pui-link">@某某某</a> <span class="pui-comment-reply-time">回复于2014-7-12 15:30</span></div>
                                            </header>
                                            <section class="pui-comment-content">
                                                <blockquote>介就是回复的内容....</blockquote>
                                                <p>介也是回复的内容....</p>
                                            </section>
                                            <footer class="pui-comment-foot">
                                                <a href="javascript:;">回复</a><a href="">顶</a><a href="javascript:;">举报</a>
                                            </footer>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pui-comment pui-comment-avatar-right">
                            <div class="pui-comment-avatar">
                                <img src="images/1.jpg" class="pui-img-circle pui-img-xs" />
                                <p>网友</p>
                            </div>
                            <div class="pui-comment-container">
                                <div class="pui-comment-main pui-comment-arrow-rt">
                                    <header class="pui-comment-header">
                                        <div class="pui-comment-title-right">
                                            #2 楼 <a href="javascript:;">赞(18)</a> <a href="javascript:;">反对(0)</a>
                                        </div>
                                        <div class="pui-comment-subtitle">评论于 2014-7-12 15:30</div>
                                    </header>
                                    <section class="pui-comment-content">
                                        评论内容XXXXXXXXXXXXXXXXXXXXXXXXXX<br/>评论内容XXXXXXXXXXXXXXXXXXXXXXXXXX<br/>
                                        评论内容XXXXXXXXXXXXXXXXXXXXXXXXXX<br/>评论内容XXXXXXXXXXXXXXXXXXXXXXXXXX
                                    </section>
                                    <div class="pui-comment-foot"><a href="javascript:;">回复</a><a href="">顶</a><a href="javascript:;">举报</a></div>
                                </div>   
                                <div class="pui-comment-reply">                   
                                    <div class="pui-comment pui-comment-avatar-left">
                                        <div class="pui-comment-arrow"><span></span></div>
                                        <div class="pui-comment-avatar">
                                            <img src="images/3.jpg" class="pui-img-circle pui-img-xs" />
                                            <p>网友</p>
                                        </div>
                                        <div class="pui-comment-container">
                                            <header class="pui-comment-header">
                                                <div class="pui-comment-title-right">
                                                    #2楼-1 <a href="javascript:;">赞(1)</a> <a href="javascript:;">反对(18)</a>
                                                </div> 
                                                <div class="pui-comment-subtitle"><a href="javascript:;" class="pui-link">@某某某</a> <span class="pui-comment-reply-time">回复于2014-7-12 15:30</span></div>
                                            </header>
                                            <section class="pui-comment-content">
                                                介就是回复的内容....
                                            </section>
                                            <footer class="pui-comment-foot pui-text-right">
                                                <a href="javascript:;">回复</a><a href="">顶</a><a href="javascript:;">举报</a>
                                            </footer>
                                        </div>
                                    </div>
                                    <div class="pui-comment pui-comment-avatar-left">   
                                        <div class="pui-comment-arrow"><span></span></div>                       
                                        <div class="pui-comment-avatar">
                                            <img src="images/2.png" class="pui-img-circle pui-img-xs" />
                                            <p>网友</p>
                                        </div>
                                        <div class="pui-comment-container">
                                            <header class="pui-comment-header">
                                                <div class="pui-comment-title-right">
                                                    #2楼-2 <a href="javascript:;">赞(1)</a> <a href="javascript:;">反对(18)</a>
                                                </div> 
                                                <div class="pui-comment-subtitle"><a href="javascript:;" class="pui-link">@某某某</a> <span class="pui-comment-reply-time">回复于2014-7-12 15:30</span></div>
                                            </header>
                                            <section class="pui-comment-content">
                                                <blockquote>介就是回复的内容....</blockquote>
                                                <p>介也是回复的内容....</p>
                                            </section>
                                            <footer class="pui-comment-foot">
                                                <a href="javascript:;">回复</a><a href="">顶</a><a href="javascript:;">举报</a>
                                            </footer>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> 
                        <br/>
                        <div class="blog-pagination">
                            <ul class="pui-pagination pui-pagination-bordered pui-pagination-prev-next"> 
                                <li><a href="#" class="disabled">上一页</a></li>
                                <li class="pui-pagination-nav"><span>1 / 15</span></li>
                                <li><a href="#">下一页</a></li> 
                            </ul>
                        </div>  
                    </div>
                    <div class="pui-grid-xs-12 pui-grid-sm-4 pui-grid-md-4 pui-grid-lg-3 blog-side">
                        <div class="pui-card pui-card-default pui-card-simple">
                            <div class="pui-card-title pui-card-title-left-border">
                                <span class="pui-card-title-right pui-xs-show"><a href="#top">TOP</a></span>
                                <strong>热门文章</strong>
                            </div>
                            <div class="pui-card-box">                                
                                <ul class="pui-list pui-top10-list">
                                    <li>
                                        <a href="#" class="pui-top-1">
                                            <span class="pui-top-count">15万</span>转载：扁平和简约来袭
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="pui-top-2">
                                            <span class="pui-top-count">11.9万</span>转载：做好扁平化设计－视觉篇
                                        </a>
                                    </li> 
                                    <li>
                                        <a href="#" class="pui-top-3">
                                            <span class="pui-top-count">4.6万</span>转载：做好扁平化设计－交互篇
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class="pui-top-4">
                                            <span class="pui-top-count">4.4万</span>转载：日常设计：网站设计灵...
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="pui-card pui-card-default pui-card-simple">
                            <div class="pui-card-title pui-card-title-left-border">
                                <span class="pui-card-title-right pui-xs-show"><a href="#top">TOP</a></span>
                                <strong>热门评论</strong>
                            </div>
                            <div class="pui-card-box">
                                <ul class="pui-list pui-list-dashed-line">
                                    <li>
                                        <a href="#" class="pui-link">John Wu</a> 评论到：“内容为本及响应式设计的需要”。—— <a href="#" class="pui-link">转载：扁平和简约来袭</a>
                                    </li>
                                    <li>
                                        <a href="#" class="pui-link">Tom Lee</a> 评论到：“内容为本及响应式设计的需要”。—— <a href="#" class="pui-link">转载：做好扁平化设计－视觉篇</a>
                                    </li>
                                    <li>
                                        <a href="#" class="pui-link">Peter Chan</a> 评论到：“交互交互交互交互交互交互”。—— <a href="#" class="pui-link">转载：做好扁平化设计－交互篇</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="pui-card pui-card-default pui-card-simple">
                            <div class="pui-card-title">
                                <span class="pui-card-title-right pui-xs-show"><a href="#top">TOP</a></span>
                                <strong><i class="fa fa-tags pui-text-teal"></i> 标签</strong>
                            </div>
                            <div class="pui-card-box">
                                <a href="#" class="pui-badge pui-badge-success pui-text-white pui-text-xl">PHP</a>
                                <a href="#" class="pui-badge pui-bg-teal pui-text-md">CSS3</a>
                                <a href="#" class="pui-badge pui-bg-orange pui-text-xl">HTML5</a>
                                <a href="#" class="pui-badge pui-badge-primary">Gulp.js</a>
                                <a href="#" class="pui-badge pui-badge-warning pui-text-white pui-text-lg">jQuery</a>
                                <a href="#" class="pui-badge pui-badge-error">Flexbox</a>
                                <a href="#" class="pui-badge pui-bg-orange">Node-webkit</a>
                                <a href="#" class="pui-badge pui-badge-secondary pui-text-lg">Node.js</a>
                                <a href="#" class="pui-badge pui-badge-gary">Memcached</a>
                                <a href="#" class="pui-badge pui-badge-info pui-text-lg">MySQL</a>
                                <a href="#" class="pui-badge pui-badge-error">webfont</a>
                                <a href="#" class="pui-badge pui-badge-info pui-text-xl">响应式</a>
                                <a href="#" class="pui-badge pui-badge-success">MongoDB</a>
                                <a href="#" class="pui-badge pui-badge-error pui-text-lg">Redis</a>
                                <a href="#" class="pui-badge pui-badge-gary">IE6</a>
                                <a href="#" class="pui-badge pui-badge-primary pui-text-xl">Plane UI</a>
                                <a href="#" class="pui-badge pui-badge-success">SSDB</a>
                                <a href="#" class="pui-badge pui-badge-info">SQlite</a>
                            </div>
                        </div>
                        <div class="pui-card pui-card-default pui-card-simple">
                            <div class="pui-card-title pui-card-title-left-border">
                                <span class="pui-card-title-right pui-xs-show"><a href="#top">TOP</a></span>
                                <strong>归档</strong>
                            </div>
                            <div class="pui-card-box">
                                <ul class="pui-list pui-list-angle-right-type pui-list-column-2">
                                    <li><a href="#">2014年12月</a></li>
                                    <li><a href="#">2014年11月</a></li>
                                    <li><a href="#">2014年10月</a></li>
                                    <li><a href="#">2014年09月</a></li>
                                    <li><a href="#">2014年08月</a></li>
                                    <li><a href="#">2014年06月</a></li>
                                    <li><a href="#">2014年04月</a></li>
                                    <li><a href="#">2014年01月</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="pui-card pui-card-default pui-card-simple">
                            <div class="pui-card-title pui-card-title-left-border">
                                <span class="pui-card-title-right pui-xs-show"><a href="#top">TOP</a></span>
                                <strong>关注我</strong>
                            </div>
                            <div class="pui-card-box padding-l-r-10">
                                <ul class="pui-menu pui-menu-radius pui-menu-inline pui-list-column-2">
                                    <li>
                                        <a href="http://weibo.com/ipandao" target="_blank"><i class="fa fa-weibo pui-text-red"></i> Weibo</a>
                                    </li>
                                    <li>
                                        <a href="https://gihub.com/pandao" target="_blank"><i class="fa fa-github"></i> Github</a>
                                    </li>
                                    <li>
                                        <a href="https://gihub.com/pandao" target="_blank"><i class="fa fa-facebook pui-text-blue-900"></i> Facebook</a>
                                    </li>
                                    <li>
                                        <a href="https://gihub.com/pandao" target="_blank"><i class="fa fa-twitter pui-text-blue-500"></i> Twitter</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="pui-card pui-card-default pui-card-simple">
                            <div class="pui-card-box padding-l-r-10">
                                <ul class="pui-menu pui-menu-radius pui-margin-none pui-list-column-2">
                                    <li>
                                        <a href="http://weibo.com/ipandao" target="_blank"><i class="fa fa-sign-in pui-text-green"></i> 登录</a>
                                    </li> 
                                    <li>
                                        <a href="http://weibo.com/ipandao" target="_blank"><i class="fa fa-user pui-text-teal"></i> 注册</a>
                                    </li>
                                    <li>
                                        <a href="https://gihub.com/pandao" target="_blank"><i class="fa fa-rss pui-text-orange"></i> 文章RSS</a>
                                    </li>
                                    <li>
                                        <a href="https://gihub.com/pandao" target="_blank"><i class="fa fa-rss-square pui-text-orange"></i> 评论RSS</a>
                                    </li>
                                </ul>
                                <p class="pui-text-center"><img src="images/qr-code.png" class="pui-img-size-auto" /></p>                       
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <footer class="pui-center pui-layout-fixed pui-layout-fixed-1200 blog-footer">
                <hr class="pui-xs-hide" />
                <ul class="pui-breadcrumb pui-margin-none">
                    <li>
                        <a href="index.html"><i class="fa fa-home"></i> 首页</a>
                    </li>
                    <li>
                        <a href="#">PHP</a>
                    </li>
                    <li>
                        <a href="#">前端</a>
                    </li>
                    <li>
                        <a href="#">设计</a>
                    </li>
                    <li>
                        <a href="#">游记</a>
                    </li>
                    <li>
                        <a href="#">关于我</a>
                    </li>
                </ul>
                <div class="copyright">
                    <span class="pui-right"><a href="#top" class="pui-link">TOP</a></span>
                    <p>Copyright &copy; 2014-2015 <a href="https://github.com/pandao/planeui" class="pui-link" title="Plane UI's Blog" target="_blank">Plane UI's Blog</a> All Rights Reserved.</p>
                    <p>Powered by <a href="https://github.com/pandao/planeui" class="pui-link" target="_blank">Plane UI</a>, <a href="https://github.com/pandao/planeui/blob/master/LICENSE" target="_blank" class="pui-link">MIT</a> License.<small class="pui-right">代码如诗。</small></p>
                </div>
            </footer>
		</div>

        <!--[if (gte IE 9) | !(IE)]><!-->
		<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
        <!--<![endif]-->

		<!--[if lt IE 9]>
		<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="./../../dist/js/planeui.patch.ie8.js"></script>
		<![endif]-->

		<!--[if lt IE 10]>
		<script type="text/javascript" src="./../../dist/js/planeui.patch.ie9.js"></script>
		<![endif]-->
		<script type="text/javascript" src="./../../dist/js/planeui.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
        <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
	</body>
</html>